<script lang="ts">
import { vElementSize } from '@vueuse/components';
import DefaultType from '~/assets/imgs/default_type.png';
</script>

<script setup lang="ts">
import { Skeleton } from '~/components/skeleton';

function useGamesHistory() {
  const logQuery = useQuery({
    queryKey: [apis.apiGameLogLobby.id],
    queryFn: async () => await apis.apiGameLogLobby({ cursor: 0 }),
  });

  const list = computed(() => logQuery.data.value?.list || []);

  return {
    list,
    logQuery,
  };
}

const { joinCdnPath, getCdnResPath } = useAppStore();

const { list, logQuery } = useGamesHistory();
const bp = useAppBreakpoints();
const targetH = ref(0);
const bodyH = computed(() => {
  if (targetH.value) {
    const count = 10;
    return targetH.value * count;
  }
  return 30 * 10;
});

function onResize({ width, height }: { width: number; height: number }) {
  targetH.value = height + (bp.ltTabletl ? 20 : 32);
  return {
    width,
    height,
  };
}

function onImageError(e) {
  e.target.src = DefaultType;
}
</script>

<template>
  <div class="relative">
    <div class="mb-5 mt-6.75 flex items-center justify-start gap-1.2 lt-tabletl:(my-2.6)">
      <i class="text- i-local:chromon1 text-4.5" />
      <span class="text-sys-text-head">{{ $t('4hxNnk9DzXjuzrnXgWijb') }}</span>
    </div>
    <TCard class="history !shadow-none">
      <div class="grid grid-cols-5 place-content-center pb-1 pt-0 text-sys-text-body lt-tabletl:(grid-cols-[1fr_auto_1fr] pb-2)">
        <span class="text-left">{{ $t('zQfkOQfqezj1l2vBna94o') }}</span>
        <span class="text-left lt-tabletl:text-center">{{ $t('0vtXdkqCewwMhiUxQuk4s') }}</span>
        <span v-if="$bp.tabletl" class="text-left"> {{ $t('442iM4LnmG9JcEt8G2SMz') }} </span>
        <span v-if="$bp.tabletl" class="text-left"> {{ $t('gaNlzHcdnlP1pk6diOFjB') }} </span>
        <span class="text-right">
          {{ $t('r9KLpxt5JjgdJ3_0mKcEb') }}
        </span>
      </div>
      <TSuspenseView
        v-bind="buildSvPropsOfQuery(logQuery)"
        loadingClass="min-h-200"
        errorClass="min-h-200"
        class="carousel"
      >
        <swiper-container
          direction="vertical"
          :slidesPerView="$bp.ltTabletl ? 9.8 : 10"
          :spaceBetween="0"
          :loop="true"
          :autoplay="{ delay: 1500, reverseDirection: true }"
          :allowTouchMove="false"
          :draggable="false"
          :style="`height:${bodyH}px;`"
          :passiveListeners="true"
          :speed="1200"
          :touchReleaseOnEdges="true"
        >
          <swiper-slide v-for="(i, k) in list" :key="k">
            <div v-element-size="onResize" class="grid grid-cols-5 cursor-pointer py-2 lt-tabletl:(grid-cols-[1fr_auto_1fr] py-3)" @click.stop="globalPopups.gameRecordDetail.open({ gameCode: i.game?.code ?? '', orderNo: i.order_no })">
              <div class="flex-center justify-start break-normal text-sys-text-head lt-tabletl:text-sm">
                <img :src="joinCdnPath(i.game?.image_icon)" class="mr-1.5 w-4.5" @error="onImageError">
                {{ i?.game?.name }}
              </div>
              <div class="flex-start gap-2 text-sys-text-body lt-tabletl:flex-center">
                <TAvatar
                  class="w-7 cursor-pointer lt-tabletl:w-6"
                  :avatar="getCdnResPath('avatar', i?.user?.avatar)"
                  :level="i?.user?.level"
                  :levelScale="0.25"
                  @click.stop="globalPopups.userProfile.open({ userId: i.user?.uid ?? '' })"
                />
                <span v-if="$bp.tabletl" class="text-sm">{{ i?.user?.nickname }}</span>
              </div>
              <div v-if="$bp.tabletl" class="flex-start text-sys-text-body">
                <TCurrencyIcon :symbol="i?.currency" class="mr-1" />
                <TAmount :value="i?.bet_amount" format="original" class="text-white lt-tabletl:text-xs" iconPos="left" />
              </div>
              <div v-if="$bp.tabletl" class="flex-start text-sys-text-body">
                <TNum :value="i?.odds" :decimals="2" format="pad-dec" class="lt-tabletl:text-sm" />
                <span class="mx-1">x</span>
              </div>
              <div class="flex-center justify-end">
                <TAmount
                  class="cursor-pointer text-green-500 lt-tabletl:text-sm"
                  :class="{ '!text-white': i.profit_amount.indexOf('-') > -1 }"

                  showpos weakpad
                  :value="i.profit_amount"
                  :symbol="i.currency"
                  format="pad-dec"
                  colored="inherit"
                  @click="globalPopups.gameRecordDetail.open({ gameCode: i.game?.code ?? '', orderNo: i.order_no })"
                />
              </div>
            </div>
          </swiper-slide>
        </swiper-container>
        <template #pending>
          <Skeleton class="grid grid-cols-5 w-full gap-5 lt-tabletl:grid-cols-3">
            <Skeleton
              v-for="i in 30"
              type="rect"
              height="25px"
              class=""
            />
          </Skeleton>
        </template>
      </TSuspenseView>
    </TCard>
  </div>
</template>

<style scoped lang="scss">
.history {
  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;

    height: 200px;
    pointer-events: none;
    content: '';
    background: linear-gradient(181deg, #0d131c00 21.34%, #131416 99.18%);
  }
}
</style>
